<template>
	<view class="container">
		<!-- 顶部标题和时间 -->
		<view class="header">
			<view class="header-left">
				<text class="title">学生签到</text>
			</view>
			<view class="header-right">
				<view class="date-navigator">
					<view class="nav-button prev" @click="changeDate(-1)">
						<!-- <uni-icons type="arrowleft" size="24" color="#666"></uni-icons> -->
						<text><</text>
					</view>
					<view class="current-date">
						<text class="date">{{ formattedDate }}</text>
						<text class="weekday">{{ formattedWeekday }}</text>
					</view>
					<view class="nav-button next" @click="changeDate(1)">
						<text>></text>
						<!-- <uni-icons type="arrowright" size="24" color="#666"></uni-icons> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 年级导航 -->
		<view class="grade-navigator">
			<view class="nav-button prev" @click="changeGrade(-1)">
				<uni-icons type="arrowleft" size="24" color="#666"></uni-icons>
				<text>上一级</text>
			</view>
			<view class="current-grade">
				<text>{{ currentGrade }}</text>
			</view>
			<view class="nav-button next" @click="changeGrade(1)">
				<text>下一级</text>
				<uni-icons type="arrowright" size="24" color="#666"></uni-icons>
			</view>
		</view>

		<!-- 统计卡片 -->
		<!-- 统计卡片 -->
		<view class="stats-container">
		  <view class="stat-card" :class="{active: activeFilter === 'all'}" @click="filterStudents('all')">
		    <view class="stat-icon">
		      <uni-icons type="person" size="28" color="#4D59FF"></uni-icons>
		    </view>
		    <view class="stat-content">
		      <text class="stat-value">{{ students.length }}</text>
		      <text class="stat-label">全部学生</text>
		    </view>
		  </view>
		  
		  <view class="stat-card" :class="{active: activeFilter === 'present'}" @click="filterStudents('present')">
		    <view class="stat-icon">
		      <uni-icons type="checkmark" size="28" color="#4CAF50"></uni-icons>
		    </view>
		    <view class="stat-content">
		      <text class="stat-value">{{ presentCount.total }}</text>
		      <text class="stat-label">
		        <text>已签到</text>
		        <text class="sub-count">(上午{{presentCount.morning}}/下午{{presentCount.afternoon}})</text>
		      </text>
		    </view>
		  </view>
		  
		  <view class="stat-card" :class="{active: activeFilter === 'absent'}" @click="filterStudents('absent')">
		    <view class="stat-icon">
		      <uni-icons type="close" size="28" color="#F44336"></uni-icons>
		    </view>
		    <view class="stat-content">
		      <text class="stat-value">{{ absentCount.total }}</text>
		      <text class="stat-label">
		        <text>未到</text>
		        <text class="sub-count">(上午{{absentCount.morning}}/下午{{absentCount.afternoon}})</text>
		      </text>
		    </view>
		  </view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="btn check-all" @click="toggleSelectAll">
				{{ isAllSelected ? '取消全选' : '全选' }}
			</button>
			<button class="btn present" @click="markPresent">
				<uni-icons type="checkmark" size="20" color="#fff"></uni-icons>
				签到
			</button>
			<button class="btn absent" @click="markAbsent">
				<uni-icons type="close" size="20" color="#fff"></uni-icons>
				未到
			</button>
		</view>

		<!-- 学生列表 -->
		<scroll-view class="student-list" scroll-y>
			<view class="list-header">
				<text class="header-text">学生列表</text>
				<text class="header-count">{{ filteredStudents.length }}人</text>
			</view>

			<checkbox-group @change="onStudentSelect">
				<view class="student-card" v-for="student in filteredStudents" :key="student.userId">
					<label class="student-info">
						<checkbox class="student-checkbox" :value="String(student.userId)" :checked="student.checked" />
						<view class="avatar" :style="{backgroundColor: getAvatarColor(student.studentName)}">
							{{ student.studentName.charAt(0) }}
						</view>
						<view class="info">
							<text class="name">{{ student.studentName }}</text>
							<text class="meta">{{ student.parentName }} · {{ student.phoneNumber }}</text>
						</view>
						<view class="status" :class="getStatusClass(student.status)">
							{{ getStatusText(student.status) }}
						</view>
					</label>

					<!-- 打卡信息 -->
					<view class="check-info">
						<!-- 上午打卡信息 -->
						<view class="check-section">
							<view class="section-header">
								<view class="time-badge morning">
									<uni-icons type="sun" size="16" color="#F39C12"></uni-icons>
									<text>上午</text>
								</view>
								<view class="check-summary">
									<text v-if="student.morningChecks" class="check-status"
										:class="getCheckStatusClass(student.morningChecks[0].status)">
										{{ getCheckStatusText(student.morningChecks[0].status) }}
									</text>
									<text v-else class="check-status unchecked">未打卡</text>
								</view>
							</view>

							<view v-if="student.morningChecks" class="check-details">
								<view v-for="(check, index) in student.morningChecks" :key="index" class="check-record">
									<view class="record-time">
										<uni-icons type="time" size="16" color="#666"></uni-icons>
										<text>{{ formatTime(check.checkTime) }}</text>
									</view>
									<view class="record-teacher">
										<uni-icons type="person" size="16" color="#666"></uni-icons>
										<text>{{ check.teacherName || '无记录' }}</text>
									</view>
								</view>
							</view>
						</view>

						<!-- 下午打卡信息 -->
						<view class="check-section">
							<view class="section-header">
								<view class="time-badge afternoon">
									<uni-icons type="moon" size="16" color="#3498DB"></uni-icons>
									<text>下午</text>
								</view>
								<view class="check-summary">
									<text v-if="student.afternoonChecks" class="check-status"
										:class="getCheckStatusClass(student.afternoonChecks[0].status)">
										{{ getCheckStatusText(student.afternoonChecks[0].status) }}
									</text>
									<text v-else class="check-status unchecked">未打卡</text>
								</view>
							</view>

							<view v-if="student.afternoonChecks" class="check-details">
								<view v-for="(check, index) in student.afternoonChecks" :key="index"
									class="check-record">
									<view class="record-time">
										<uni-icons type="time" size="16" color="#666"></uni-icons>
										<text>{{ formatTime(check.checkTime) }}</text>
									</view>
									<view class="record-teacher">
										<uni-icons type="person" size="16" color="#666"></uni-icons>
										<text>{{ check.teacherName || '无记录' }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>

			<view v-if="students.length === 0" class="empty-state">
				<image src="/static/empty.png" class="empty-image"></image>
				<text class="empty-text">暂无学生数据</text>
			</view>

			<view v-if="isFetchingRecords" class="loading-state">
				<view class="loading-content">
					<view class="loading-spinner"></view>
					<text>正在获取打卡记录 ({{ fetchedCount }}/{{ students.length }})</text>
				</view>
				<view class="progress-container">
					<view class="progress-bar" :style="{width: `${(fetchedCount / students.length) * 100}%`}"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {
		globalVariable
	} from '../../configMy.js';

	export default {
		data() {
			return {
				gradeOptions: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一年级'],
				currentGradeIndex: 0,
				students: [],
				checkRecords: [],
				currentDate: new Date(),
				isFetchingRecords: false,
				fetchedCount: 0,
				// activeFilter: null,
				attendanceRecords: {},
				activeFilter: 'all',
				currentTeacher: {
					id: '1',
					name: '教务处'
				}
			}
		},
		computed: {
			currentGrade() {
				return this.gradeOptions[this.currentGradeIndex];
			},
			checkedCount() {
				return this.students.filter(s => s.checked).length;
			},
			presentCount() {
			    // 统计上午已签到的人数
			    const morningPresent = this.filteredStudents.filter(student => 
			      student.morningChecks && student.morningChecks[0].status === 1
			    ).length;
			    
			    // 统计下午已签到的人数
			    const afternoonPresent = this.filteredStudents.filter(student => 
			      student.afternoonChecks && student.afternoonChecks[0].status === 1
			    ).length;
			    
			    return {
			      morning: morningPresent,
			      afternoon: afternoonPresent,
			      total: morningPresent + afternoonPresent
			    };
			  },
			  
			  absentCount() {
			    // 统计上午未到的人数
			    const morningAbsent = this.filteredStudents.filter(student => 
			      student.morningChecks && student.morningChecks[0].status === 0
			    ).length;
			    
			    // 统计下午未到的人数
			    const afternoonAbsent = this.filteredStudents.filter(student => 
			      student.afternoonChecks && student.afternoonChecks[0].status === 0
			    ).length;
			    
			    return {
			      morning: morningAbsent,
			      afternoon: afternoonAbsent,
			      total: morningAbsent + afternoonAbsent
			    };
			  },
			isAllSelected() {
				return this.students.length > 0 && this.students.every(s => s.checked);
			},
			formattedDate() {
				const year = this.currentDate.getFullYear();
				const month = this.currentDate.getMonth() + 1;
				const day = this.currentDate.getDate();
				return `${year}年${month}月${day}日`;
			},
			formattedWeekday() {
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				return weekdays[this.currentDate.getDay()];
			},
			formattedDateForAPI() {
				const year = this.currentDate.getFullYear();
				const month = String(this.currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(this.currentDate.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			filteredStudents() {
				let students = this.students.map(student => {
					const allRecords = this.checkRecords
						.filter(record => String(record.studentId) === String(student.userId))
						.sort((a, b) => new Date(b.checkTime) - new Date(a.checkTime));

					const morningChecks = allRecords.filter(r => r.checkType === 1);
					const afternoonChecks = allRecords.filter(r => r.checkType === 2);

					const latestStatus = allRecords.length > 0 ? allRecords[0].status : null;
					const displayStatus = latestStatus !== null ?
						(latestStatus === 1 ? 'present' : 'absent') :
						'unmarked';

					return {
						...student,
						status: displayStatus,
						morningChecks: morningChecks.length > 0 ? morningChecks : null,
						afternoonChecks: afternoonChecks.length > 0 ? afternoonChecks : null,
						checked: student.checked || false
					};
				});

				if (this.activeFilter) {
					students = students.filter(student => {
						if (this.activeFilter === 'present') return student.status === 'present';
						if (this.activeFilter === 'absent') return student.status === 'absent';
						return true;
					});
				}

				return students;
			},
			currentCheckType() {
				const hours = new Date().getHours();
				return hours < 12 ? 1 : 2;
			},
			currentCheckRemark() {
				return this.currentCheckType === 1 ? '上午到校' : '下午到校';
			}
		},
		onLoad() {
			this.loadStudents();
		},
		methods: {
			filterStudents(status) {
				if (this.activeFilter === status) {
					this.activeFilter = null;
				} else {
					this.activeFilter = status;
				}
			},
			changeDate(days) {
				const newDate = new Date(this.currentDate);
				newDate.setDate(newDate.getDate() + days);
				this.currentDate = newDate;
				this.loadStudents();
			},
			changeGrade(step) {
				let newIndex = this.currentGradeIndex + step;
				if (newIndex < 0) newIndex = this.gradeOptions.length - 1;
				if (newIndex >= this.gradeOptions.length) newIndex = 0;

				this.currentGradeIndex = newIndex;
				this.loadStudents();
			},
			filterStudents(status) {
			  if (this.activeFilter === status) {
			    this.activeFilter = null;
			  } else {
			    this.activeFilter = status;
			  }
			},
			getBeijingTime() {
				const now = new Date();
				const beijingOffset = 8 * 60 * 60 * 1000;
				return new Date(now.getTime() + beijingOffset);
			},
			getBeijingTimeString() {
				const beijingTime = this.getBeijingTime();
				return beijingTime.toISOString().replace('T', ' ').substring(0, 19);
			},
			loadStudents() {
				uni.showLoading({
					title: '加载中...'
				});
				const grade = this.currentGrade;

				uni.request({
					url: globalVariable + "/getStudentsByGrade",
					method: 'GET',
					data: {
						grade
					},
					success: (res) => {
						if (res.data.status === 1) {
							this.students = res.data.data.map(student => ({
								...student,
								checked: false,
								status: this.attendanceRecords[student.userId] || 'unmarked'
							}));
							this.fetchCheckRecordsOneByOne();
						}
					},
					complete: () => uni.hideLoading()
				});
			},
			async fetchCheckRecordsOneByOne() {
				this.isFetchingRecords = true;
				this.fetchedCount = 0;
				this.checkRecords = [];

				const batchSize = 3;
				const totalStudents = this.students.length;

				for (let i = 0; i < totalStudents; i += batchSize) {
					const batch = this.students.slice(i, i + batchSize);
					const promises = batch.map(student => this.fetchSingleCheckRecord(student.userId));

					try {
						await Promise.all(promises);
						this.fetchedCount = Math.min(i + batchSize, totalStudents);
					} catch (error) {
						console.error('获取打卡记录出错:', error);
					}
				}

				this.isFetchingRecords = false;
			},
			fetchSingleCheckRecord(studentId) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: globalVariable + "/getStudentCheckByIdDate",
						method: 'GET',
						data: {
							date: this.formattedDateForAPI,
							studentId: studentId
						},
						success: (res) => {
							if (res.data.status === 1 && res.data.data) {
								const records = res.data.data;
								records.sort((a, b) => new Date(b.checkTime) - new Date(a.checkTime));

								let latestStatus = null;
								for (const record of records) {
									if (record.status !== null && record.status !== undefined) {
										latestStatus = record.status;
										break;
									}
								}

								if (latestStatus !== null) {
									this.attendanceRecords[studentId] = latestStatus === 1 ?
										'present' : 'absent';
								}

								records.forEach(record => {
									if (record) {
										record.studentId = String(record.studentId);
										this.checkRecords.push(record);
									}
								});
							}
							resolve();
						},
						fail: (err) => {
							console.error('获取打卡记录失败:', err);
							reject(err);
						}
					});
				});
			},
			onStudentSelect(e) {
				const checkedIds = e.detail.value.map(id => parseInt(id));
				this.students = this.students.map(student => ({
					...student,
					checked: checkedIds.includes(student.userId)
				}));
			},
			toggleSelectAll() {
				const shouldSelectAll = !this.isAllSelected;
				this.students = this.students.map(student => ({
					...student,
					checked: shouldSelectAll
				}));
			},
			markPresent() {
				const selectedStudents = this.students.filter(s =>
					s.checked && s.status !== 'present'
				);

				if (selectedStudents.length === 0) {
					let msg = '请先选择学生';
					if (this.checkedCount > 0) {
						msg = '选中的学生已经签到，无需重复操作';
					}
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					return;
				}

				this.markStudents(1, '签到成功');
			},
			markAbsent() {
				const selectedStudents = this.students.filter(s =>
					s.checked && s.status !== 'absent'
				);

				if (selectedStudents.length === 0) {
					let msg = '请先选择学生';
					if (this.checkedCount > 0) {
						msg = '选中的学生已经标记为未到，无需重复操作';
					}
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					return;
				}

				this.markStudents(0, '已标记未到');
			},
			markStudents(status, successMsg) {
				const checkTime = this.getBeijingTimeString();
				const checkType = this.currentCheckType;
				const remark = this.currentCheckRemark;

				const updatedStudents = [];
				this.students = this.students.map(student => {
					if (student.checked) {
						const existingRecords = this.checkRecords.filter(
							r => String(r.studentId) === String(student.userId) &&
							r.checkType === checkType &&
							r.status === status
						);

						if (existingRecords.length === 0) {
							this.attendanceRecords[student.userId] = status === 1 ? 'present' : 'absent';

							updatedStudents.push({
								studentId: student.userId,
								studentName: student.studentName,
								grade: student.grade,
								teacherId: this.currentTeacher.id,
								teacherName: this.currentTeacher.name,
								checkType: checkType,
								checkTime: checkTime,
								remark: remark,
								status: status
							});

							return {
								...student,
								status: status === 1 ? 'present' : 'absent',
								checked: false
							};
						}
						return {
							...student,
							checked: false
						};
					}
					return student;
				});

				if (updatedStudents.length === 0) {
					uni.showToast({
						title: '没有需要更新的记录',
						icon: 'none'
					});
					return;
				}

				uni.request({
					url: globalVariable + "/updateAttendance",
					method: 'POST',
					data: {
						checkRecords: updatedStudents
					},
					success: (res) => {
						if (res.data.status === 1) {
							uni.showToast({
								title: successMsg,
								icon: 'success'
							});
							this.fetchCheckRecordsOneByOne();
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			},
			getAvatarColor(name) {
				const colors = [
					'#FF6B6B', '#4ECDC4', '#45B7D1',
					'#A37AFC', '#FFA36B', '#6BFF8E',
					'#FFD166', '#06D6A0', '#118AB2'
				];
				const charCode = name.charCodeAt(0) || 0;
				return colors[charCode % colors.length];
			},
			getStatusClass(status) {
				return {
					'unmarked': status === 'unmarked',
					'present': status === 'present',
					'absent': status === 'absent'
				};
			},
			getStatusText(status) {
				const statusMap = {
					'unmarked': '未签到',
					'present': '已签到',
					'absent': '未到'
				};
				return statusMap[status] || '未知';
			},
			getCheckStatusClass(status) {
				return {
					'checked': status === 1,
					'absent': status === 0,
					'unchecked': status === null || status === undefined
				};
			},
			getCheckStatusText(status) {
				return status === 1 ? '正常' : status === 0 ? '请假' : '未打卡';
			},
			formatTime(timeString) {
				if (!timeString) return '';
				try {
					const timePart = timeString.split(' ')[1];
					return timePart ? timePart.substring(0, 5) : '';
				} catch (e) {
					return '';
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	/* 基础颜色定义 */
	$primary-color: #4D59FF;
	$success-color: #4CAF50;
	$warning-color: #F44336;
	$text-color: #333;
	$text-light: #666;
	$text-lighter: #999;
	$border-color: #eee;
	$bg-color: #f8f9fa;
	$card-bg: #fff;
	$shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

	/* 基础样式 */
	.container {
		padding: 20rpx;
		background-color: $bg-color;
		min-height: 100vh;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

.sub-count {
  display: block;
  font-size: 20rpx;
  color: $text-light;
  margin-top: 4rpx;
}
	/* 顶部标题和时间 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: $card-bg;
		border-radius: 16rpx;
		box-shadow: $shadow;

		.header-left {
			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: $primary-color;
			}
		}

		.header-right {
			.date-navigator {
				display: flex;
				align-items: center;
				background-color: rgba($primary-color, 0.05);
				border-radius: 50rpx;
				padding: 12rpx 20rpx;

				.nav-button {
					display: flex;
					align-items: center;
					padding: 8rpx 16rpx;
					font-size: 26rpx;
					color: $text-light;
					transition: all 0.3s;

					&:active {
						opacity: 0.7;
					}

					text {
						margin: 0 8rpx;
					}
				}

				.current-date {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 20rpx;

					.date {
						font-size: 28rpx;
						font-weight: 500;
						color: $text-color;
					}

					.weekday {
						font-size: 24rpx;
						color: $primary-color;
					}
				}
			}
		}
	}

	/* 年级导航 */
	.grade-navigator {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: $card-bg;
		border-radius: 16rpx;
		box-shadow: $shadow;

		.nav-button {
			display: flex;
			align-items: center;
			padding: 12rpx 20rpx;
			border-radius: 50rpx;
			font-size: 26rpx;
			color: $text-light;
			background-color: rgba($primary-color, 0.05);
			transition: all 0.3s;

			&:active {
				background-color: rgba($primary-color, 0.1);
			}

			text {
				margin: 0 8rpx;
			}
		}

		.current-grade {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			color: $primary-color;
		}
	}

	/* 统计卡片 */
	.stats-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		gap: 20rpx;

		.stat-card {
			flex: 1;
			background-color: $card-bg;
			border-radius: 16rpx;
			padding: 24rpx;
			box-shadow: $shadow;
			display: flex;
			align-items: center;
			transition: all 0.3s;
			position: relative;
			overflow: hidden;

			&.active {
				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 6rpx;
				}

				&.all::after {
					background-color: $primary-color;
				}

				&.present::after {
					background-color: $success-color;
				}

				&.absent::after {
					background-color: $warning-color;
				}
			}

			.stat-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				&.all {
					background-color: rgba($primary-color, 0.1);
					color: $primary-color;
				}

				&.present {
					background-color: rgba($success-color, 0.1);
					color: $success-color;
				}

				&.absent {
					background-color: rgba($warning-color, 0.1);
					color: $warning-color;
				}
			}

			.stat-content {
				display: flex;
				flex-direction: column;
			}

			.stat-value {
				font-size: 36rpx;
				font-weight: 700;
				color: $text-color;
			}

			.stat-label {
				font-size: 24rpx;
				color: $text-light;
			}
		}
	}

	/* 操作按钮 */
	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		gap: 20rpx;

		.btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: 500;
			border: none;
			border-radius: 12rpx;
			transition: all 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				transform: scale(0.98);
			}

			uni-icons {
				margin-right: 8rpx;
			}

			&.check-all {
				background-color: #95a5a6;
				color: white;
			}

			&.present {
				background-color: $success-color;
				color: white;
			}

			&.absent {
				background-color: $warning-color;
				color: white;
			}
		}
	}

	/* 学生列表 */
	.student-list {
		background-color: $card-bg;
		border-radius: 16rpx;
		padding: 0 20rpx;
		max-height: calc(100vh - 500rpx);
		box-shadow: $shadow;

		.list-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid $border-color;

			.header-text {
				font-size: 32rpx;
				font-weight: 600;
				color: $text-color;
			}

			.header-count {
				font-size: 26rpx;
				color: $text-light;
			}
		}
	}

	/* 学生卡片 */
	.student-card {
		border-bottom: 1rpx solid $border-color;
		padding: 24rpx 0;

		&:last-child {
			border-bottom: none;
		}

		.student-info {
			display: flex;
			align-items: center;

			.student-checkbox {
				transform: scale(1.1);
				margin-right: 20rpx;
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-weight: bold;
			}

			.info {
				flex: 1;

				.name {
					font-size: 32rpx;
					font-weight: 500;
					color: $text-color;
					display: block;
					margin-bottom: 4rpx;
				}

				.meta {
					font-size: 24rpx;
					color: $text-light;
				}
			}

			.status {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-weight: 500;

				&.unmarked {
					background-color: #f5f5f5;
					color: $text-lighter;
				}

				&.present {
					background-color: #E8F5E9;
					color: $success-color;
				}

				&.absent {
					background-color: #FFEBEE;
					color: $warning-color;
				}
			}
		}

		/* 打卡信息 */
		.check-info {
			margin-left: 120rpx;
			padding-top: 16rpx;
			border-top: 1rpx dashed $border-color;

			.check-section {
				margin-bottom: 20rpx;

				.section-header {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;

					.time-badge {
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						font-weight: 500;
						margin-right: 16rpx;
						display: flex;
						align-items: center;

						&.morning {
							background-color: #FFF8E1;
							color: #F39C12;
						}

						&.afternoon {
							background-color: #E3F2FD;
							color: #3498DB;
						}

						uni-icons {
							margin-right: 6rpx;
						}
					}

					.check-summary {
						flex: 1;
					}

					.check-status {
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						font-weight: 500;

						&.checked {
							background-color: #E8F5E9;
							color: $success-color;
						}

						&.absent {
							background-color: #FFEBEE;
							color: $warning-color;
						}

						&.unchecked {
							background-color: #f5f5f5;
							color: $text-lighter;
						}
					}
				}

				.check-details {
					margin-left: 40rpx;

					.check-record {
						display: flex;
						justify-content: space-between;
						padding: 8rpx 0;
						font-size: 24rpx;
						color: $text-light;

						.record-time,
						.record-teacher {
							display: flex;
							align-items: center;

							uni-icons {
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0;

		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 24rpx;
			opacity: 0.5;
		}

		.empty-text {
			font-size: 28rpx;
			color: $text-lighter;
		}
	}

	/* 加载状态 */
	.loading-state {
		padding: 24rpx 0;

		.loading-content {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 16rpx;
			font-size: 26rpx;
			color: $text-light;

			.loading-spinner {
				width: 32rpx;
				height: 32rpx;
				border: 4rpx solid $primary-color;
				border-top-color: transparent;
				border-radius: 50%;
				margin-right: 12rpx;
				animation: spin 1s linear infinite;
			}
		}

		.progress-container {
			height: 6rpx;
			background-color: $border-color;
			border-radius: 3rpx;
			overflow: hidden;

			.progress-bar {
				height: 100%;
				background-color: $primary-color;
				border-radius: 3rpx;
				transition: width 0.3s ease;
			}
		}
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
</style>